<!DOCTYPE html>

<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>JPetStore</title>
  <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css"
        media="screen" />
  <!-- 点击刷新页面 -->
  <script type="text/javascript">
    function changeCode() {
      var img = document.getElementById("yzImg");
      var xhr = new XMLHttpRequest();
      var url = "/verify/getcode"
      xhr.open('POST', url, true);
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status === 200) {
          var res = this.response;
          $("#yzImg").attr("src", window.URL.createObjectURL(res));
        }
      };
      xhr.send();
      // img.src = "verification?time=" + new Date().getTime();
    }
  </script>
  <script src="https://kit.fontawesome.com/699bb860e0.js" crossorigin="anonymous"></script>
  <script src="/js/jquery-3.3.1.js" ></script>
  <script src="/js/verify.js"></script>
</head>

<body>
<div id="Header">

  <div id="Logo">
    <div id="LogoContent">
      <a href="mainView"><img id="Logo1Content" src="/images/logo.jpg"/></a>
    </div>
  </div>

  <div id="Menu">
    <div id="MenuContent">
      <div th:if="${loginAccount == null}">
        <a href="cartView"> <img align="middle" name="img_cart" src="/images/cart.gif" /></a>
        <img align="middle" src="/images/separator.gif" />
        <a href="/account">Sign In</a>
        <img align="middle" src="/images/separator.gif" />
        <a href="/account">My Account</a>
        <img align="middle" src="/images/separator.gif" />
        <a href="help.html">?</a>
      </div>
      <div th:if="${loginAccount != null}">
        <a href="cartView"> <img align="middle" name="img_cart" src="/images/cart.gif" /></a>
        <img align="middle" src="/images/separator.gif" />
        <a th:href="@{'/account/'+${loginAccount.username}+'/logOut'}">Sign Out</a>
        <img align="middle" src="/images/separator.gif" />
        <a th:href="@{'/account/'+${loginAccount.username}+'/update'}">My Account</a>
        <img align="middle" src="/images/separator.gif" />
        <a href="help.html">?</a>
      </div>

    </div>
  </div>
  <div id="Search">
    <div id="SearchContent">
      <form action="searchProducts" method="post">
        <i class="fa-solid fa-magnifying-glass"></i>
        <input type="text" name="keyword" size="14" id="keyword">
        <input type="submit" name="searchProducts" value="Search">
      </form>
      <div id="productAutoComplete">
        <ul id="productAutoList">

        </ul>
      </div>
    </div>
  </div>

  <div id="QuickLinks">
    <a href="categoryView?categoryId=FISH"><img src="/images/sm_fish.gif" /></a>
    <img src="/images/separator.gif" />
    <a href="categoryView?categoryId=DOGS"><img src="/images/sm_dogs.gif" /></a>
    <img src="/images/separator.gif" />
    <a href="categoryView?categoryId=REPTILES"><img src="/images/sm_reptiles.gif" /></a>
    <img src="/images/separator.gif" />
    <a href="categoryView?categoryId=CATS"><img src="/images/sm_cats.gif" /></a>
    <img src="/images/separator.gif" />
    <a href="categoryView?categoryId=BIRDS"><img src="/images/sm_birds.gif" /></a>
  </div>

</div>

<div id="Content" />